<template>
	<div id="audition_enroll_choose" class="container">
		<div class="title">
			<span>报名</span>
			<div class="close" @click="cancel()"></div>
		</div>
		
		<div class="row_1">
			<label>课程名称：{{audition.courseName}}</label>
			<label>教师：{{syllabus.teacherUserName}}</label>
			<label>已报名人数：{{syllabus.studentNum}} / {{syllabus.recruitNum}}</label>
		</div>
		
		<div class="row_2">
			<label>选择上课时间：</label>
			 <el-date-picker v-model="classDate" id="classDate"  type="date" placeholder="上课日期"
			 	:clearable="false" :picker-options="pickerOptions"
			 	style="width: 1.7rem;" value-format="yyyy-MM-dd" @change="dateChange">
		    </el-date-picker>
		    &nbsp;
			<el-select v-model="param.classSyllabusId" placeholder="上课时间段" 
					   id="classSyllabusId"	style="width: 1.7rem;" @change="syllabusChange">
				    <el-option v-for="item in syllabusList" :key="item.classSyllabusId"
				      			:label="item.time" :value="item.classSyllabusId">
				    </el-option>
			  </el-select>
		</div>
		
		<div class="content">
			<div class="condition">
				<div class="tip">校区学员</div>
				<el-input class="search" @input="searchClue()"  suffix-icon="el-icon-search"
		 				  v-model="param.keyword" placeholder="输入 学员姓名 / 联系电话 查询"/>
			</div>
			
			<div class="table">
				<div class="thead">
					<div style="width: 0.8rem;"></div>
					<div style="width: 3rem;">名称</div>
					<div style="width: 2.5rem;">年龄</div>
					<div style="width: 3rem;">联系电话</div>
				</div>
				<div class="tbody">
					<div class="tr_div" v-for="item in clueList">
						<div class="tr">
							<div style="width: 0.8rem;margin-left: 0;background-position: center;" class="sub_icon" @click="checkClue(item)"
								:class="checkList.indexOf(item.clueId)>-1? 'sub_icon_active':''"></div>
							<div style="width: 3rem;">{{item.realName}}</div>
							<div style="width: 2.5rem;">{{item.age}}</div>
							<div style="width: 3rem;">{{item.phone}}</div>
						</div>
					</div>
				</div>
				
				<!--<el-pagination class="page"
			      layout="total, prev, pager, next"
			      :page-size="goodsParam.pageSize"
			      :current-page="goodsParam.currPage"
		      	  @current-change="goodsPageIndexChange"
			      :total="goodsNum">
			    </el-pagination>-->
			</div>
		</div>
		
		<div class="count">
			<div class="total_tip">
				已选学员
			</div>
			<div class="table">
				<div class="thead">
					<div style="width: 2.5rem;">学员</div>
					<div style="width: 2.5rem;">年龄</div>
					<div style="width: 2.5rem;">联系电话</div>
					<div style="width: 2rem;">操作</div>
				</div>
				<div class="tr_div" v-for="item,index in countList">
					<div class="tr">
						<div style="width: 2.5rem;">{{item.realName}}</div>
						<div style="width: 2.5rem;">{{item.age}}</div>
						<div style="width: 2.5rem;">{{item.phone}}</div>
						<div style="width: 2rem;">
							<div class="btn_del" @click="delCount(index)">删除</div>
						</div>
					</div>
				</div>
				<div class="compute">
					已选定 {{check_num}} 位学员
					<!--<div class="compute_money">
						总计应收：￥0
					</div>-->
				</div>
			</div>
		</div>

			
		<div class="btn_div">
			<div class="btn_sure" @click="ok()">
				报名
			</div>
			<div class="btn_cancel" @click="cancel()">返 回</div>
		</div>
	</div>
</template>

<script>
	
var vm,dict;
export default {
	data : function() {
		return {
			//搜索关键词
			param : {
				keyword : "",
				classId : "",
				clueIdList : "",
				classSyllabusId : "",
				campusId : ""
			},
			//试听班级和课节数组
			audition : {},
			syllabusMap : {},
			//课节日期和课节时间段列表
			classDate: null,
			syllabusList: [],
			//学生,结算列表,被勾选数组
			clueList : [],
			countList : [],
			checkList : [],
			//日期有效性计算
	        pickerOptions : {
				disabledDate : function(date) {
					date = tool.DateToString(date,"yyyy-MM-dd");
					return (vm.syllabusMap[date]? false : true);
				}
			},
		}
	},
	computed : {
		check_num : function() {
			return this.checkList.length;
		},
		syllabus : function() {
			var syllabus = {};
			vm.syllabusList.forEach(function(item) {
				if(vm.param.classSyllabusId == item.classSyllabusId) {
					syllabus = item;
					return false;
				}
			})
			return syllabus;
		}
	},
	methods : {
		init : function(audition) {
			vm.audition = audition;
			var s = audition.nearTrialClassSyllabus;
			
			//清空数据列表
			vm.clueList = [];
			vm.countList = [];
			vm.checkList = [];
			
			//重置参数
			vm.param = {
				keyword : "",
				classId : audition.classId,
				clueIdList : [],
				classSyllabusId : s.classSyllabusId,
				campusId : audition.campusId
			}
			//默认选择最近课节的日期
			vm.classDate = s.startTime.substring(0,10);
			
			var param = {
				classId : audition.classId,
				startTime : s.startTime
			};
			api.auditionSyllabus(param).then(function(data) {
				//解析日期课节映射
				vm.syllabusMap = vm.getSyllabusMap(data.list);
				//赋值课节列表
				vm.syllabusList = vm.syllabusMap[vm.classDate];
				//查询可报名学生列表
				vm.searchClue();
			});
		},
		getSyllabusMap : function(list) {
			var m = {};
			list.forEach(function(item){
				//截取时间段
				item.time = item.startTime.substring(11,16) + " - "+ item.endTime.substring(11,16);
				//截取日期,作为key
				var k = item.startTime.substring(0,10);
				if(m[k] == null) {
					m[k] = [];
				}
				m[k].push(item);
			});
			return m;
		},
		dateChange : function() {
			//获取课节列表,默认选择第一个
			vm.syllabusList = vm.syllabusMap[vm.classDate];
			vm.param.classSyllabusId = vm.syllabusList[0].classSyllabusId;
			
			//执行课节改变事件
			vm.syllabusChange();
		},
		syllabusChange : function() {
			//清空已选学生,重新查询学生列表
			vm.countList = [];
			vm.checkList = [];
			vm.searchClue();
		},
		ok : function() {
			var counts = vm.countList;
			
			var rules = [{
				judge : vm.classDate,
				focus : $("#classDate"),
				tips : "请选择上课日期"
			},{
				judge : vm.param.classSyllabusId,
				focus : $("#classSyllabusId"),
				tips : "请选择上课时间段"
			},{
				judge : counts.length>0,
				tips : "请至少选择一位学员"
			}]
			if(!tool.validate(rules)) {
				return false;
			}
			
			vm.param.clueIdList = vm.checkList;
			api.auditionEnroll(vm.param).then(function(data) {
				//获取课节时间
				
				vm.$emit('ok',vm.syllabus,counts);
			})
			
		},
		cancel : function() {
			vm.$emit('cancel');
		},
		showSub : function(event) {
			var $icon = $(event.currentTarget);
			$icon.toggleClass("tr_icon_active");
			var $sub = $icon.parent().next();
			
			if($sub.css("display")=="none") {
				$sub.slideDown();
			} else {
				$sub.slideUp();
			}
		},
		checkClue : function(clue) {
			var id = clue.clueId;
			//别名
			var checks = vm.checkList;
			var counts = vm.countList;
			//判断是否被勾选
			var index = checks.indexOf(id);
			if(index>-1) {
				//已被勾选,从两个列表中删除
				for(var i=0; i<counts.length; i++) {
					if(counts[i].clueId == id) {
						counts.splice(i,1);
						break;
					}
				}
				checks.splice(index,1);
				return;
			}
			
			var num = vm.syllabus.recruitNum - vm.syllabus.studentNum;
			if(num <= checks.length) {
				tool.message({type:"warning", message:"已达到班级计划人数，不可再添加"});
				return;
			}
			
			//未被勾选,创建结算对象
			var count = tool.clone(clue);
			//加入列表
			counts.push(count);
			checks.push(id);
			
		},
		searchClue : function() {
			api.auditionClueList(vm.param).then(function(data) {
//				console.log(JSON.stringify(data))
				vm.clueList = data.list;
			})
		},
		delCount : function(index) {
			//别名
			var counts = vm.countList;
			var checks = vm.checkList;
			
			var id = counts[index].clueId;
			//从两个列表删除数据
			checks.splice(checks.indexOf(id),1);
			counts.splice(index,1);
			
		},
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
	}
}

</script>
<style lang="scss">
	#clue_enroll_choose {
		.el-input__inner {
			/*background-color: rgb(247,248,250);*/
		}
	}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table2.css"></style>
<style scoped>
	
	.row_1,.row_2 {
		font-size: 0.16rem;
		margin: 0 0.3rem;
		line-height: 0.36rem;
		color: #333333;
	}
	.row_2 {
		margin-top: 0.1rem;
		/*padding-bottom: 0.1rem;*/
		/*border-bottom: 0.01rem solid #ebebeb;*/
	}
	.row_1 label {
		display: inline-block;
		width: 3rem;
		padding: 0 0.1rem;
	}
	.row_2 label {
		padding-left: 0.1rem;
	}
	
	.btn_div {
		padding: 0.2rem 0;
	}
	/* ----------导航条---------- */
	.nav_div {
		overflow: hidden;
		margin: 0 0.22rem;
		border-bottom: 0.01rem solid #f3f6fc;
	}
	.nav {
		width: 1.3rem;
		line-height: 0.35rem;
		float: left;
		color: #999999;
		font-size: 0.2rem;
		letter-spacing: 0.03rem;
		font-weight: bold;
		text-align: center;
		cursor: pointer;
	}
	.nav_active {
		color: #3885f8;
		border-bottom: 0.03rem solid #3885f8;
	}
	
	/* ----------课程---------- */
	.content {
		padding: 0 0.3rem;
	}
	.condition {
		height: 0.38rem;
		margin-top: 0.1rem;
		margin-bottom: 0.05rem;
		/*outline: 1px solid red;*/
	}
	.tip {
		float: left;
		line-height: 0.38rem;
		color: #333333;
		font-size: 0.18rem;
		font-weight: bold;
	}
	.search {
		float: right;
		width: 3.5rem;
	}
	
	
	.tr_icon,.sub_icon {
		float: left;
		width: 0.4rem;
		height: 0.3rem !important;
		margin-top: 0.11rem;
		/*outline: 0.01rem solid red;*/
		background-size: 0.18rem;
		background-repeat: no-repeat;
		background-position: 0.15rem center;
		cursor: pointer;
	}
	.sub_icon {
		margin-left: 0.2rem;
		background-image: url(../../../assets/img/clue_manage/check_no.png);
	}
	.sub_icon_active {
		background-image: url(../../../assets/img/clue_manage/check_yes.png);
	}
	.tr_icon {
		background-image: url(../../../assets/img/clue_manage/enroll_open.png);
	}
	.tr_icon_active {
		background-image: url(../../../assets/img/clue_manage/enroll_close.png);
	}
	
	.sub_time {
		float: right;
		width: 1.4rem;
	}
	.sub_money {
		float: right;
		width: 0.85rem;
	}
	
	.page {
		text-align: right;
		padding: 0.05rem 0.2rem;
	}
	
	/* ----------结算---------- */
	.count {
		padding: 0 0.3rem;
	}
	
	.total_tip {
		line-height: 0.38rem;
		color: #333333;
		font-size: 0.18rem;
		font-weight: bold;
		margin: 0.15rem 0 0.05rem 0;
	}
	.type {
		margin-left: 0.1rem;
		display: inline-block;
		height: 0.2rem;
		line-height: 0.2rem;
		font-size: 0.12rem;
		background-color: #3885F8;
		color: white;
		border-radius:0.05rem ;
		padding: 0 0.05rem;
		margin-right: 0.03rem;
	}
	
	.tr_two_row {
		padding-top: 0.05rem;
		line-height: 0.2rem;
	}
	.btn_del {
		/*outline: 1px solid red;*/
		width: 0.6rem;
		height: 0.25rem;
		line-height: 0.25rem;
		margin: 0.12rem auto 0 auto;
		text-align: left;
		padding-left: 0.22rem;
		color: #3885F8;
		background-image: url(../../../assets/img/clue_manage/enroll_del.png);
		background-size: 0.18rem;
		background-repeat: no-repeat;
		background-position: left center;
		cursor: pointer;
	}
	
	.compute {
		position: relative;
		line-height: 0.48rem;
		height: 0.48rem;
		text-align: center;
		background-color: rgb(248,249,253);
		color: #333333;
		font-size: 0.16rem;
	}
	.compute_money {
		position:absolute;
		width: 2rem;
		height: 0.48rem;
		right: 0.3rem;
		top: 0;
		text-align: right;
		font-weight: bold;
		color: #3885F8;
		/*outline: 1px solid blue;*/
	}
</style>